@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

:root {
  --background: #ffffff;
  --foreground: #171717;
}

.dark {
  --background: #0a0a0a;
  --foreground: #ededed;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

@layer base {
  body {
    @apply bg-background text-foreground;
    font-family: Arial, Helvetica, sans-serif;
  }
}

@utility text-balance {
  .text-balance {
    text-wrap: balance;
  }
}

* {
  touch-action: manipulation;
}

body {
  font-family: 'Pixelify Sans', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  overflow: hidden;
}

.high-score-badge + div {
  transform: translate(10px, 20px) !important;
}
